<template>
  <div class="room-list-page">
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-content">
        <el-icon class="back-icon" @click="goBack">
          <ArrowLeft />
        </el-icon>
        <span class="nav-title">房源推荐</span>
        <div class="nav-placeholder"></div>
      </div>
    </div>
    
    <!-- 搜索筛选组件 -->
    <SearchFilter 
      v-model:filterState="filterState"
      @filter-change="handleFilterChange"
    />
    
    <!-- 房源列表 -->
    <div class="room-content" v-loading="loading">
      <!-- 有数据时显示房源列表 -->
      <div v-if="roomList.length > 0" class="room-list-container">
        <div class="room-grid">
          <RoomCard
            v-for="room in roomList"
            :key="room.id"
            :room="room"
            @click="handleRoomClick(room)"
          />
        </div>
        
        <!-- 加载更多 -->
        <div class="load-more" v-if="hasMore">
          <el-button 
            :loading="loadingMore" 
            @click="loadMore"
            type="primary"
            plain
            class="load-more-btn"
          >
            {{ loadingMore ? '加载中...' : '加载更多' }}
          </el-button>
        </div>
        
        <!-- 没有更多数据 -->
        <div v-else-if="roomList.length > 0" class="no-more">
          <span class="no-more-text">到底了，没有更多数据了</span>
        </div>
      </div>
      
      <!-- 空数据状态 -->
      <EmptyState v-else-if="!loading" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import SearchFilter from './components/SearchFilter.vue'
import RoomCard from './components/RoomCard.vue'
import EmptyState from './components/EmptyState.vue'
import { getRentRoomListApi } from '@/api/room'

const router = useRouter()

// 页面状态
const loading = ref(false)
const loadingMore = ref(false)
const roomList = ref([])
const hasMore = ref(true)

// 分页参数
const pagination = reactive({
  page: 1,
  limit: 10,
  total: 0
})

// 筛选状态
const filterState = reactive({
  location: '',
  rentRange: '',
  sortBy: ''
})

// 搜索参数
const searchParams = reactive({
  page: 1,
  limit: 10
})

// 获取房源列表
const getRoomList = async (isLoadMore = false) => {
  try {
    if (isLoadMore) {
      loadingMore.value = true
    } else {
      loading.value = true
      pagination.page = 1
      roomList.value = []
    }

    // 构建搜索参数
    const params = {
      ...searchParams,
      page: pagination.page,
      limit: pagination.limit
    }

    // 根据筛选状态添加参数
    if (filterState.location) {
      if (Array.isArray(filterState.location) && filterState.location.length) {
        const [provinceId, cityId, districtId] = filterState.location
        if (provinceId) params.provinceId = provinceId
        if (cityId) params.cityId = cityId
        if (districtId) params.districtId = districtId
      } else if (typeof filterState.location === 'string') {
        params.cityId = filterState.location
      }
    }
    if (filterState.rentRange) {
      const [minRent, maxRent] = filterState.rentRange.split('-')
      params.minRent = minRent
      params.maxRent = maxRent
    }
    if (filterState.sortBy) {
      const [orderBy, orderType] = filterState.sortBy.split('-')
      params.orderBy = orderBy
      params.orderType = orderType
    }

    const response = await getRentRoomListApi(params)
    
    if (isLoadMore) {
      roomList.value.push(...response.records)
    } else {
      roomList.value = response.records
    }
    
    pagination.total = response.total
    hasMore.value = roomList.value.length < response.total
    
    console.log('房源列表数据:', response)
  } catch (error) {
    console.error('获取房源列表失败:', error)
    ElMessage.error('获取房源列表失败')
  } finally {
    loading.value = false
    loadingMore.value = false
  }
}

// 加载更多
const loadMore = () => {
  if (hasMore.value && !loadingMore.value) {
    pagination.page++
    getRoomList(true)
  }
}

// 处理筛选变化
const handleFilterChange = () => {
  console.log('筛选条件变化:', filterState)
  getRoomList()
}

// 处理房源点击
const handleRoomClick = (room) => {
  console.log('房源点击:', room)
  router.push({ name: 'RentRoomDetail', params: { id: room.id } })
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 页面初始化
onMounted(() => {
  getRoomList()
})
</script>

<style scoped>
.room-list-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.nav-bar {
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  height: 44px;
}

.back-icon {
  font-size: 20px;
  cursor: pointer;
  color: #333;
  transition: color 0.3s ease;
}

.back-icon:hover {
  color: #409eff;
}

.nav-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.nav-placeholder {
  width: 20px;
}

.room-content {
  flex: 1;
  position: relative;
}

.room-list-container {
  padding: 16px;
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.load-more {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.load-more-btn {
  min-width: 120px;
}

.no-more {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.no-more-text {
  font-size: 14px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-content {
    padding: 8px 12px;
  }
  
  .nav-title {
    font-size: 16px;
  }
  
  .room-list-container {
    padding: 12px;
  }
  
  .room-grid {
    gap: 8px;
  }
}

/* Loading状态样式 */
:deep(.el-loading-mask) {
  background-color: rgba(255, 255, 255, 0.8);
}

:deep(.el-loading-spinner) {
  top: 50%;
  margin-top: -50px;
}
</style>
